<template>
    <a-form @keypress.enter="handleSearch">
        <flexbox wrap="wrap">
            <flexbox class="margin-b-16 margin-r-16">
                <span>产线/产品：</span>
                <SelectCatalogCode ref="SelectCatalogCodeRef" :changeOnSelect="true" v-model:value="form.catalogCode" />
            </flexbox>
            <flexbox class="margin-b-16 margin-r-16">
                <span class="margin-r-16">开始时间：</span>
                <HRangePickerCell
                    :value="[
                        form.startTime ? $moment(form.startTime, 'YYYY-MM-DD') : null,
                        form.endTime ? $moment(form.endTime, 'YYYY-MM-DD') : null
                    ]"
                    @change="rangeDateChange"
                />
            </flexbox>

            <flexbox class="margin-b-16 margin-r-16">
                <span class="margin-r-16">路标名称：</span>
                <HSuggestInput allowClear v-model:value="form.signpostName" placeholder="请输入" @change="handleSearch" />
            </flexbox>

            <flexbox class="margin-b-16 margin-r-16">
                <span class="margin-r-16">状态：</span>
                <a-select v-model:value="form.status" style="width: 100px" allowClear class="margin-r-8">
                    <a-select-option key="0">待推送</a-select-option>
                    <a-select-option key="1">待规划</a-select-option>
                    <a-select-option key="2">审核中</a-select-option>
                    <a-select-option key="3">执行中</a-select-option>
                    <a-select-option key="5">已完成</a-select-option>
                </a-select>
            </flexbox>

            <flexbox class="margin-b-16" justify="flex-end" style="flex: 1">
                <a-button type="primary" @click="handleSearch">查询</a-button>
                <a-button class="margin-l-8" @click="handleReset">重置</a-button>
            </flexbox>
        </flexbox>
    </a-form>
</template>

<script lang="ts">
import { HRangePickerCell, SelectCatalogCode } from '@/components';
import { useSearchHistory } from '@/hooks/common/useSearchHistory';
import { HSuggestInput } from '@/components';
import { defineComponent, reactive, toRefs, ref, unref } from 'vue';
export default defineComponent({
    components: {
        HSuggestInput,
        HRangePickerCell,
        SelectCatalogCode
    },
    emits: ['change'],
    setup(_, { emit }) {
        const { saveHistory } = useSearchHistory();
        const SelectCatalogCodeRef = ref<any>();
        const state = reactive<any>({
            form: {
                catalogCode: null,
                signpostName: '',
                status: null,
                startTime: null,
                endTime: null
            },
            treeData: []
        });

        const handleSearch = () => {
            if (state.form.signpostName) {
                saveHistory(state.form.signpostName);
            }
            emit('change', {
                ...state.form
            });
        };
        const handleReset = () => {
            state.form = {
                catalogCode: null,
                signpostName: '',
                status: null,
                startTime: null,
                endTime: null
            };
            unref(SelectCatalogCodeRef).handleClear();
            handleSearch();
        };
        const rangeDateChange = (val) => {
            const { startTime, endTime } = val;
            state.form.startTime = startTime;
            state.form.endTime = endTime;
        };
        return {
            SelectCatalogCodeRef,
            ...toRefs(state),
            handleSearch,
            handleReset,
            rangeDateChange
        };
    }
});
</script>

<style scoped lang="less">
::v-deep(.ant-select-selector) {
    height: 31px !important;
}
</style>